.px2rem(@name,@px){
    @{name}: @px / 75px * 1rem 
}
body{
    background: #f8f3f7;
}
.header{
    background: url(../images/map_yiheyuan.jpg) no-repeat;
    .px2rem(padding,75);
    .px2rem(padding-bottom,150);
    .ling{
        .px2rem(padding,75);
        width: 6%;
        img{
            width: 100%;
        }
    }
    .touxiang{
        .px2rem(width,320);
        .px2rem(height,320);
        margin: 0 auto;
        .px2rem(margin-top,75);
        .px2rem(margin-bottom,75);
        overflow: hidden;
        img{
            width: 100%;
            border-radius: 50%;
        }
    }
    .denglu{
        width: 50%;
        margin: 0 auto;
        
        text-align: center;
        border: 1px solid white;
        color: white;
        .px2rem(padding,60);
        .px2rem(border-radius,30);
    }
}
.nav_bar{
    .px2rem(padding-top,75);
    .px2rem(padding-bottom,75);
    .px2rem(margin-bottom,75);
    background: white;
    ul{
        display: flex;
        justify-content: space-between; 
        align-items: center;
        li{
            
            z-index: 1;
            border-right: 1px solid #dfdfdf;
            p{
                text-align: center;
                .px2rem(padding-left,120);
                .px2rem(padding-right,120);
                .px2rem(line-height,100);
            }
        }
        li:last-child{border: none;}
    }
}
.dianping{
    background: white;
    .px2rem(padding,75);
    .px2rem(margin-bottom,75);
    display: flex;
    justify-content: space-between;
    align-items: center;
    dl{
        display: flex;
        align-items: center;
        dt{
            img{width: 50%;}
        }
    }
}
.dianping_loading{
    background: white;
    .px2rem(padding,75);
    .px2rem(margin-bottom,75);
    display: flex;
    justify-content: space-between;
    align-items: center;
    dl{
        display: flex;
        align-items: center;
        dt{
            img{width: 50%;}
        }
    }
}
.record{
    background: white;
    .px2rem(padding,75);
    .px2rem(margin-bottom,75);
    display: flex;
    justify-content: space-between;
    align-items: center;
    dl{
        display: flex;
        align-items: center;
        dt{
            img{width: 50%;}
        }
    }
}
.collect{
    background: white;
    .px2rem(padding,75);
    .px2rem(margin-bottom,75);
    display: flex;
    justify-content: space-between;
    align-items: center;
    dl{
        display: flex;
        align-items: center;
        dt{
            img{width: 50%;}
        }
    }
}
.share{
    background: white;
    .px2rem(padding,75);
    .px2rem(margin-bottom,75);
    display: flex;
    justify-content: space-between;
    align-items: center;
    dl{
        display: flex;
        align-items: center;
        dt{
            img{width: 50%;}
        }
    }
}
.attestation{
    background: white;
    .px2rem(padding,75);
    .px2rem(margin-bottom,75);
    display: flex;
    justify-content: space-between;
    align-items: center;
    dl{
        display: flex;
        align-items: center;
        dt{
            img{width: 50%;}
        }
    }
}
.set{
    background: white;
    .px2rem(padding,75);
    .px2rem(margin-bottom,435);
    display: flex;
    justify-content: space-between;
    align-items: center;
    dl{
        display: flex;
        align-items: center;
        dt{
            img{width: 50%;}
        }
    }
}
.nav_bottom{
    z-index: 90;
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   .px2rem(height,360);
   background: white; 
   display: flex;
   justify-content: space-around;
   text-align: center;
   border-top: 1px solid #e8e3e9;
   dl{
       dt{
           img{
               width: 40%;
               .px2rem(padding,30)
            }
       }
   }
}